<!--
 * @Author       : wfl
 * @LastEditors  : wfl
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-09-14 11:15:19
 * @LastEditTime : 2023-09-14 18:08:58
-->
<script setup lang="ts" name="IkRadioGroup">
defineProps({
  list: {
    type: Array as PropType<{
      label: String
      value: any
    }[]>
  },
  // 是否是按钮模式
  isButton: {
    type: Boolean,
    default: true
  }
})

const active = defineModel({
  type: String,
  default: ''
})
</script>

<template>
  <el-radio-group v-model="active" class="ik-radio-btn">
    <el-radio-button v-for="(item, index) in list" :key="index" :label="item.value">{{ item.label }}</el-radio-button>
  </el-radio-group>
</template>

<style lang="scss" scoped>
.ik-radio-btn {
  padding: 4px;
  background-color: var(--ik-main-bg);
  border-radius: 6px;

  :deep(.el-radio-button__inner) {
    background: transparent;
    border: none;
  }

  :deep(.el-radio-button__original-radio:checked+.el-radio-button__inner) {
    color: var(--el-color-primary);
    background-color: var(--ik-card-bg);
    border: none;
    padding: 8px 20px;
    border-radius: 6px;
    box-shadow: none;
  }

  :deep(.el-radio-button:last-child .el-radio-button__inner) {
    border-radius: var(--el-border-radius-base);
  }
}
</style>
